// config 商品说明
import { Text, View, Image, Navigator } from '@tarojs/components';
import { useEffect, useState } from 'react';
import './Commodity.scss';
import { AtTabs, AtTabsPane, AtCountdown } from 'taro-ui';
import Taro from '@tarojs/taro';


const Commodity = () => {
    // tab切换
    const tabList = [{ title: '商品说明' }, { title: '拼团记录' }]
    const [current, setCurrent] = useState(0)
    const handleClick = (v) => {
        setCurrent(v)
    }
    // 倒计时
    const onTimeUp = () => {
        Taro.showToast({
            title: '拼团时间已结束',
            icon: 'success',
            duration: 2000,
        })
    }

    return <View>
        {/* 商品图片信息 */}
        <View className='com_img'>
            <Image src="../../../static/images/wode.png"></Image>
            <View className='com_text'>
                <View className='at-row text_one'>
                    <View className='at-col at-col-9'>
                        <Text className='t_people'>3人成团</Text>
                        <Text> 精品泰国桂圆 1000g/盒</Text>
                    </View>
                    <View className='at-col at-col-3 text_right'>
                        <Text>￥7.8</Text>
                        <Text className='del_line'> ￥14.6</Text>
                    </View>
                </View>
                <View className='at-row text_two'>
                    <Text className='at-col at-col-8'>已成5团 / 可成10团 / 每人限购1分</Text>
                    <Text className='at-col at-col-4 text_right'>提货点：鲜丰水果</Text>
                </View>
                <View className='at-row text_three'>
                    <View className='at-col at-col-9'>
                        <Text>剩余 </Text>
                        <AtCountdown
                            className='green'
                            format={{ day: '天', hours: ':', minutes: ':', seconds: '' }}
                            isCard
                            isShowDay
                            day={0}
                            hours={0}
                            minutes={0}
                            seconds={10}
                            onTimeUp={onTimeUp.bind(this)}
                        />
                    </View>
                    <View className='at-col at-col-3 text_right'>下单2小时后</View>
                </View>
            </View>
        </View>
        {/* current: value */}
        <View className='com_click'>
            <AtTabs current={current} tabList={tabList} onClick={handleClick.bind(this)}>
                <AtTabsPane index={0} current={current}>
                    <View style='padding: 20px 20px;' >
                        <Image src='../../../static/images/wode.png'></Image>
                        <View className='text_t'>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
                        </View>
                    </View>
                </AtTabsPane>
                <AtTabsPane index={1} current={current}>
                    <View style='padding: 20px 20px;'>
                        <View className='clustering'>
                            <Text>3人成团</Text> / <Text>已成5团</Text> / <Text>可成10团</Text>
                        </View>
                        <View className='members'>
                            <View>
                                <Text className='text'>1 团</Text>
                            </View>
                            <View className='members_mem'>
                                <View>
                                    <Image></Image>
                                    <Text>Lee （我）</Text>
                                </View>
                                <View>团了1份</View>
                                <View>2小时前</View>
                            </View>
                            <View className='members_mem'>
                                <View>
                                    <Image></Image>
                                    <Text>Lee （我）</Text>
                                </View>
                                <View>团了1份</View>
                                <View>2小时前</View>
                            </View>
                            <View className='members_mem'>
                                <View>
                                    <Image></Image>
                                    <Text>Lee （我）</Text>
                                </View>
                                <View>团了1份</View>
                                <View>2小时前</View>
                            </View>

                        </View>
                    </View>
                </AtTabsPane>
            </AtTabs>
        </View>

        <Navigator url='../Order/Order' className='com-footer'>立即拼团</Navigator>
    </View>

}
export default Commodity;